<template>
  <el-row>
    <el-col :span='10' :push='2'>
      <el-card class='box-card' :body-style="{padding: '5px'}">
        <div slot='header' style='text-align: center'>
          考试课题：《Java互联网分布式项目实战微服务开发》
          <div>题量: 20 满分: 100.0 创建者: 杨涛 作答时间:03-15 19:48至</div>
        </div>
        <div class='whiteDiv'>
          <div class='marBom50 questionLi'>
            <h3 class='mark_name colorDeep'>
              1. 下面关于线程创建的定义不正确的有
            </h3>
          </div>
          <div class='stem_answer'>
            <div class='clearfix answerBg' onclick='addChoice(this);' qid='401702104' qtype='0'>
              <span data='B' class='choice401702104 num_option fl '>A</span>
              <div class='fl answer_p'>
                <p>new Thread(){ public void run() { System.out.println(\"ThreadOne重写run方法！！\"); } };</p></div>
            </div>
            <div class='clearfix answerBg' onclick='addChoice(this);' qid='401702104' qtype='0'>
              <span data='B' class='choice401702104 num_option fl '>B</span>
              <div class='fl answer_p'>
                <p>class ThreadOne extends Thread{ public void run() { System.out.println(\"ThreadOne重写run方法！！\"); }
                  }</p></div>
            </div>
            <div class='clearfix answerBg' onclick='addChoice(this);' qid='401702104' qtype='0'>
              <span data='C' class='choice401702104 num_option fl '>C</span>
              <div class='fl answer_p'>
                <p>class ThreadOne extends Runnable{ public void run() { System.out.println(\"ThreadOne重写run方法！！\"); }
                  }</p>
              </div>
            </div>
            <div class='clearfix answerBg' onclick='addChoice(this);' qid='401702104' qtype='0'>
              <span data='D' class='choice401702104 num_option fl '>D</span>
              <div class='fl answer_p'>
                <p>new Thread(new Runnable() { public void run() { System.out.println(\"ThreadOne重写run方法！！\"); } }
                  );</p>
              </div>
            </div>
          </div>
          <div class='marBom50 questionLi'>
            <h3 class='mark_name colorDeep'>
              2. 这道题目是什么题目
            </h3>
          </div>
          <div class='stem_answer'>
            <div class='clearfix answerBg' onclick='addChoice(this);' qid='401702104' qtype='0'>
              <span data='B' class='choice401702104 num_option fl '>A</span>
              <div class='fl answer_p'>
                <p>单选题123123123</p></div>
            </div>
            <div class='clearfix answerBg' onclick='addChoice(this);' qid='401702104' qtype='0'>
              <span data='B' class='choice401702104 num_option fl '>B</span>
              <div class='fl answer_p'>
                <p>多选题123123123</p></div>
            </div>
            <div class='clearfix answerBg' onclick='addChoice(this);' qid='401702104' qtype='0'>
              <span data='C' class='choice401702104 num_option fl '>C</span>
              <div class='fl answer_p'>
                <p>单选多选题</p>
              </div>
            </div>
            <div class='clearfix answerBg' onclick='addChoice(this);' qid='401702104' qtype='0'>
              <span data='D' class='choice401702104 num_option fl '>D</span>
              <div class='fl answer_p'>
                <p>多选和单选</p>
              </div>
            </div>
          </div>
          <div class='marBom50 questionLi'>
            <h3 class='mark_name colorDeep'>
              3. 以下关于toString（）方法、equals（）方法说法正确的是？（ ）
            </h3>
          </div>
          <div class='stem_answer'>
            <div class='clearfix answerBg' onclick='addChoice(this);' qid='401702104' qtype='0'>
              <span data='B' class='choice401702104 num_option fl '>A</span>
              <div class='fl answer_p'>
                <p>重写Object类的toString（）方法是为了方便打印对象的地址值</p></div>
            </div>
            <div class='clearfix answerBg' onclick='addChoice(this);' qid='401702104' qtype='0'>
              <span data='B' class='choice401702104 num_option fl '>B</span>
              <div class='fl answer_p'>
                <p>重写Object类的equals（）方法是为了比较对象的地址值</p></div>
            </div>
            <div class='clearfix answerBg' onclick='addChoice(this);' qid='401702104' qtype='0'>
              <span data='C' class='choice401702104 num_option fl '>C</span>
              <div class='fl answer_p'>
                <p>未重写Object类的equals()方法默认是比较对象中的属性值</p>
              </div>
            </div>
            <div class='clearfix answerBg' onclick='addChoice(this);' qid='401702104' qtype='0'>
              <span data='D' class='choice401702104 num_option fl '>D</span>
              <div class='fl answer_p'>
                <p>重写Object类的toString()方法是方便打印对象中的属性值</p>
              </div>
            </div>
          </div>
          <div class='marBom50 questionLi'>
            <h3 class='mark_name colorDeep'>
              4. 以下选项对Lambda说法错误的是 ?（）
            </h3>
          </div>
          <div class='stem_answer'>
            <div class='clearfix answerBg' onclick='addChoice(this);' qid='401702104' qtype='0'>
              <span data='B' class='choice401702104 num_option fl '>A</span>
              <div class='fl answer_p'>
                <p>必须有接口且接口中只有一个抽象方法</p></div>
            </div>
            <div class='clearfix answerBg' onclick='addChoice(this);' qid='401702104' qtype='0'>
              <span data='B' class='choice401702104 num_option fl '>B</span>
              <div class='fl answer_p'>
                <p>Lambda表达式的参数列表 ，没有参数时小括号可省略</p></div>
            </div>
            <div class='clearfix answerBg' onclick='addChoice(this);' qid='401702104' qtype='0'>
              <span data='C' class='choice401702104 num_option fl '>C</span>
              <div class='fl answer_p'>
                <p>Lambda表达式的都是延迟执行。</p>
              </div>
            </div>
            <div class='clearfix answerBg' onclick='addChoice(this);' qid='401702104' qtype='0'>
              <span data='D' class='choice401702104 num_option fl '>D</span>
              <div class='fl answer_p'>
                <p>Lambda表达式的参数列表的 参数数据类型可以省略。</p>
              </div>
            </div>
          </div>
          <div class='marBom50 questionLi'>
            <h3 class='mark_name colorDeep'>
              3. Java是面向过程的编程语言还是面向对象的编程语言？
            </h3>
          </div>
          <div class='stem_answer'>
            <div class='clearfix answerBg' onclick='addChoice(this);' qid='401702104' qtype='0'>
              <div class='fl answer_p'>
                <p>解析：Java是面向对象的编程语言</p></div>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span='9' :push='3'>
      <el-card>
        <div>
          <div style='padding: 20px;'>一. 单选题（25分）</div>
          <ul class='topicNumber_list clearfix'>
            <li class='answerSheet401702104'>1</li>
            <li class='answerSheet401702104'>2</li>
            <li class='answerSheet401702104'>3</li>
            <li class='answerSheet401702104'>4</li>
            <li class='answerSheet401702104'>5</li>
          </ul>
        </div>
      </el-card>
      <el-card style="margin-top: 20px">
        <div id="viz" style="height: 700px">

        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    name: 'KaoShi',
    components: {},
    data() {
      return {
        radio1: ''
      };
    },
    methods: {
      draw () {
        var config = {
          container_id: 'viz',
          server_url: "bolt://175.178.60.127:7687",
          server_user: 'neo4j',
          server_password: 'password',
          labels: {
            "全栈Web开发 Python & VueCli": {
              "size": "pagerank",
              "title_properties": [
                "courseName",
                "nodeName",
                "desc"
              ],
              "caption": "nodeName",
              "community": "community"
            },
            "图云教育的英语": {
              "size": "pagerank",
              "title_properties": [
                "courseName",
                "nodeName",
                "desc"
              ],
              "caption": "nodeName",
              "community": "community"
            },
            "Java互联网分布式项目实战微服务开发": {
              "size": "pagerank",
              "title_properties": [
                "courseName",
                "nodeName",
                "desc"
              ],
              "caption": "nodeName",
              "community": "community"
            }
          },
          relationships: {
            "图云教育的英语_relation": {
              "thickness": "weight",
              "caption": "relationName"
            },
            "全栈Web开发 Python & VueCli_relation": {
              "thickness": "weight",
              "caption": "relationName"
            },
            "Java互联网分布式项目实战微服务开发_relation": {
              "thickness": "weight",
              "caption": "relationName"
            }
          },
          initial_cypher: "MATCH (n:`Java互联网分布式项目实战微服务开发` {isDelete:0})-[r]->(p {isDelete:0}) return *"
        }
        var viz = new NeoVis.default(config)
        viz.render()
      },
      readyNeovisJs () {
        let that = this
        let arr = ['./neovis.js']
        arr.map((item) => {
          let script = document.createElement('script')
          script.type = 'text/javascript'
          script.src = item
          document.getElementsByTagName('body')[0].appendChild(script)
          script.onload = function () {
            that.draw()
          }
        })
      },
    },
    created () {
      this.readyNeovisJs()
    }
  };
</script>

<style scoped>
  .topicNumber_list {
    padding-left: 23px;
  }

  .clearfix {
    zoom: 1;
    overflow: hidden;
  }

  ul, ol, li {
    list-style-type: none;
  }

  .topicNumber_list li.current {
    background-color: #3A8BFF;
    border-color: #3A8BFF;
    color: #FFFFFF;
  }

  .topicNumber_list li {
    width: 32px;
    height: 32px;
    line-height: 32px;
    margin: 0 16px 20px 0;
    background: #FFFFFF;
    border: solid #94C1FF 1px;
    font-size: 14px;
    color: #3A8BFF;
    float: left;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
  }

  .mark_name {
    line-height: 20px;
    margin: 0 20px;
    font-size: 14px;
    overflow-wrap: break-word;
  }

  .colorDeep {
    color: #181E33;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
  }

  .whiteDiv {
    padding: 10px 20px 0 24px;
    position: relative;
  }

  .answerBg {
    padding: 5px 0 10px 20px;
  }

  .clearfix {
    zoom: 1;
    overflow: hidden;
  }

  * {
    margin: 0;
    padding: 0;
  }

  .num_option {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid #E1EAF4;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    color: #646873;
    margin-top: 2px;
  }

  .fl {
    float: left;
  }

  .answer_p {
    font-size: 14px;
    color: #181E33;
    line-height: 24px;
    width: 480px;
    margin-left: 16px;
    padding-top: 7px;
  }
</style>
